Post your any code related problem to www.abctutorial.com

Follow the previous video and articles to complete the POS tutorials

Step-1:

• Use this below invoice template code inside your ng-controller=”HomeInvoiceList”

<div class="card" ng-show="invoice">
        <div class="card-header">
            Order
            <strong>{{Sale.OrderNo}}</strong>
            <span class="float-right"> <a class="btn btn-success" ng-click="SaveInvoice()">Save</a></span>

        </div>
        <div class="card-body">
            <div class="row mb-4">
                <div class="col-sm-6">
                    <div>
                        <strong>abctutorial</strong>
                    </div>
                    <div>Madalinskiego 8</div>
                    <div>71-101 Szczecin, Poland</div>
                    <div>Email: info@webz.com.pl</div>
                    <div>Phone: +48 444 666 3333</div>
                </div>

                <div class="col-sm-6">
                    <div class="float-right">
                        <div>
                            <input type="text" ng-model="Sale.CustomerName" class="BorderLess" placeholder="Customer name" />
                        </div>
                        <div><textarea class="BorderLess" ng-model="Sale.CustomerAddress" placeholder="Address"></textarea></div>
                        <div><input class="BorderLess" ng-model="Sale.CustomerPhone" type="number" placeholder="Phone" /></div>
                    </div>
                </div>



            </div>

            <div class="table-responsive-sm">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th class="center">#</th>
                            <th>Item</th>
                            <th>Category</th>

                            <th class="right">Unit Cost</th>
                            <th class="center">Qty</th>
                            <th class="right">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="cart in InvoiceCart">
                            <td class="center">{{$index+1}}</td>
                            <td class="left strong">
                                <select ng-model="cart.ProductId" ng-click="SetValueOfProduct(cart.ProductId);SubTotalCalculation();">
                                    <option>--Select--</option>
                                    <option ng-repeat="product in ProductList" value="{{product.ProductId}}">{{product.Name}}</option>
                                </select>
                            </td>
                            <td class="left">{{cart.CategoryName}}</td>

                            <td class="right"><input ng-model="cart.UnitPrice" value="{{cart.UnitPrice}}" /></td>
                            <td class="center"><input class="BorderLess" ng-model="cart.Quantity" ng-change="OnChangeLineTotalSet(cart.ProductId);SubTotalCalculation();" value="1" type="number" placeholder="Quantity" /></td>
                            <td class="right"><input value={{cart.Quantity*cart.UnitPrice}} ng-model="cart.LineTotal" /></td>
                            <td><a href="#" ng-click="RowDelete($index)"><i class="fa fa-times"></i></a></td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#" ng-click="AddNewRow()"><i class="fa fa-plus"></i></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="col-lg-4 col-sm-5">

                </div>

                <div class="col-lg-4 col-sm-5 ml-auto">
                    <table class="table table-clear">
                        <tbody>
                            <tr>
                                <td class="left">
                                    <strong>Subtotal</strong>
                                </td>
                                <td class="right">${{Sale.Subtotal}}</td>
                            </tr>
                            <tr>
                                <td class="left">
                                    <strong>
                                        Discount
                                        <select ng-model="Sale.DiscountParcentage" ng-click="CalculateDiscount()">
                                            <option value="">--Select--</option>
                                            <option value="10">10%</option>
                                            <option value="20">20%</option>
                                            <option value="30">30%</option>
                                        </select>
                                    </strong>
                                </td>
                                <td class="right">${{Sale.DiscountAmount}}</td>
                            </tr>
                            <tr>
                                <td class="left">
                                    <strong>
                                        VAT
                                        <select ng-model="Sale.VatParcentage" ng-click="CalculateVat()">
                                            <option value="">--Select--</option>
                                            <option value="10">10%</option>
                                            <option value="20">20%</option>
                                            <option value="30">30%</option>
                                        </select>
                                    </strong>
                                </td>
                                <td class="right">${{Sale.VatAmount}}</td>
                            </tr>
                            <tr>
                                <td class="left">
                                    <strong>Total</strong>
                                </td>
                                <td class="right">
                                    <strong>${{Sale.TotalAmout}}</strong>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <a href="#" class="btn btn-danger" ng-click="ShowHideEdit()"><i class="fa fa-times"></i>Cancel</a>

        </div>
    </div>

• Use ng-show in sales list DIV

ng-show="list"

• Change Sales list Detail Button column by this

<td><a href="#" class="btn btn-success" ng-click="ShowHideEdit();GetInvoiceSalesBySalesId(item.SalesId);"><i class="fa fa-edit"></i>Edit</a></td>

• Create this below scope in HomeInvoiceListController.js

   		$scope.Sale = new Object();
       	$scope.list = true;
        $scope.invoice = false;

• Add below method inside HomeInvoiceListController.js

             $scope.ShowHideEdit = function () {
            		 $scope.list = $scope.list == true ? false : true;
           		 $scope.invoice = $scope.invoice == true ? false : true;
        }

• Add this method inside your HomeController.cs

        [HttpGet]
        public JsonResult GetInvoiceBySalesId(int salesId)
        {
            POS_TutorialEntities db = new POS_TutorialEntities();
            List<Sale> dataList = (from sd in db.SalesDetails.ToList()
                           join s in db.Sales on sd.SalesId equals s.SalesId
                           where sd.SalesId==salesId
                           select new Sale {
                               SalesId=(int)sd.SalesId,
                               OrderNo=s.OrderNo,
                               CustomerName=s.CustomerName,
                               CustomerPhone = s.CustomerPhone,
                               CustomerAddress = s.CustomerAddress,
                               OrderDate=s.OrderDate,
                               PaymentMethod = s.PaymentMethod,
                               TotalAmout = s.TotalAmout,
                               SalesDetailId = sd.SalesDetailId,
                               ProductId=sd.ProductId,
                               UnitPrice=sd.UnitPrice,
                               Quantity=sd.Quantity,
                               LineTotal=sd.LineTotal,
                               DiscountParcentage=s.DiscountParcentage,
                               VatParcentage = s.VatParcentage
                           }).ToList();
            return Json(dataList, JsonRequestBehavior.AllowGet);
        }

• Add this method to your HomeInvoiceListController.js

       $scope.GetInvoiceSalesBySalesId = function (salesId) {
            $http.get('/Home/GetInvoiceBySalesId', { params: { salesId: salesId } })
                .then(function (response) {
                    var data = response.data;
                    $scope.SalesList = data;
                    $scope.Sale.OrderNo = $scope.SalesList[0].OrderNo;
                    $scope.Sale.CustomerName = $scope.SalesList[0].CustomerName;
                    $scope.Sale.CustomerAddress = $scope.SalesList[0].CustomerAddress;
                    $scope.Sale.CustomerPhone = parseInt($scope.SalesList[0].CustomerPhone);
                    $scope.Sale.Subtotal = $scope.SalesList[0].Subtotal;
                    $scope.Sale.DiscountParcentage = $scope.SalesList[0].DiscountParcentage;
              
                    $scope.Sale.VatParcentage = $scope.SalesList[0].VatParcentage;
          
                    $scope.Sale.TotalAmout = $scope.SalesList[0].TotalAmout;
                });
        }

Step-2:

• Run the project